<template>
    <el-container>
        <el-header style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <!-- 这个爆红不用管,是elementui的属性,它识别不了所以爆红 -->
            <el-row type="flex" align="middle">
                <el-col :span="3">
                    <!-- 测试一下图片 -->
                    <img src="../assets/logo.png" alt="logo" width="162px" height="44px" style="display: inline-block;">
                </el-col>
                <el-col :span="2">
                    <div style="font-size: large;">LOGO照片</div>
                </el-col>
                <el-col :span="3" :offset="5">
                    <div style="font-size: larger;font-weight: bold;">慧眼识才-智慧招聘项目</div>
                </el-col>
            </el-row>
        </el-header>

        <!-- 测试一下背景 -->
        <div style="background-image: url('static/background.jpg');background-size: cover;">
            <el-main
                style="height: 93.6vh;align-self: center;display: flex; align-items: center;justify-content: center;">



                <div style="width: 400px;height: 450px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 25px;background-color:white;"
                    v-if="login">
                    <div
                        style="font-size: 25px;font-weight: bold;text-align: center;margin-bottom: 50px;margin-top: 50px;">
                        账号登录</div>
                    <el-form label-width="25%" style="font-weight: 500;">
                        <el-form-item label="账号">
                            <el-input placeholder="请输入账号" style="width: 240px;" v-model="loginData.account"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input placeholder="请输入密码" style="width: 240px;" v-model="loginData.password"
                                show-password></el-input>
                        </el-form-item>
                        <el-form-item label="验证码">
                            <el-row>
                                <el-col :span="12"><el-input placeholder="请输入验证码" style="width: 90%;"
                                        v-model="loginData.code"></el-input></el-col>
                                <el-col :span="12" style="padding-top: 5px;">
                                    <img :src='`data:image/png;base64,${imageBase64}`' @click="validateImage"
                                        alt="验证码加载失败" style="object-fit: contain;height: 30px;">
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item>
                        </el-form-item>
                    </el-form>
                    <div style="text-align: center;">
                        <el-button type="primary" style="width: 25%;" @click="gologin" :disabled="loginDisabled">登录</el-button>
                        <div><router-link to="/login" @click.native="change()" class="login-link">注册</router-link></div>
                    </div>
                </div>


                <div style="width: 500px;height: 560px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 25px;background-color:white;"
                    v-else>
                    <div
                        style="font-size: 25px;font-weight: bold;text-align: center;margin-top: 10px;margin-bottom: 30px;">
                        账号注册</div>
                    <el-form label-width="150px" style="font-weight: 500;">
                        <el-form-item label="账号">
                            <el-input placeholder="请输入账号" style="width: 240px;" v-model="registData.account"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input placeholder="请输入昵称" style="width: 240px;" v-model="registData.hrName"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input placeholder="请输入邮箱" style="width: 240px;" v-model="registData.email"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input placeholder="请输入密码" style="width: 240px;" v-model="registData.password"
                                show-password></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码">
                            <el-input placeholder="请输入密码" style="width: 240px;" v-model="registData.repassword"
                                show-password></el-input>
                        </el-form-item>
                        <el-form-item label="验证码">
                            <el-row>
                                <el-col :span="12"><el-input placeholder="请输入验证码" style="width: 150px;"
                                        v-model="registData.code"></el-input></el-col>
                                <el-col :span="12" style="padding-top: 5px;">
                                    <el-button @click="getEmailValidateCode()">发送验证码</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item>
                        </el-form-item>
                    </el-form>
                    <div style="text-align: center;">
                        <el-button type="primary" style="width: 150px;" @click="hrRegist()">注册</el-button>
                        <div><router-link  to="/login" @click.native="change()" class="login-link">返回登录</router-link></div>
                    </div>
                </div>

            </el-main>
        </div>
    </el-container>
</template>

<script>
import { hrLogin, register, validateCodeImage, hrCompanyCheckQuery, emailValidateCode } from '@/api/hr';

export default {
    data() {
        return {
            loginDisabled:false,
            imageBase64: null,
            login: true,
            loginData: {
                account: "xbtt",
                password: 123456,
                code: "",
            },
            registData: {
                account: "czjy",
                hrName: "czjy",
                email:"caizhangjunyi@qq.com",
                password: 123456,
                repassword: 123456,
                code: "",
            }
        }
    },
    methods: {
        getEmailValidateCode(){
            emailValidateCode({"address":this.registData.email}).then(res=>{
                if (res.code==200) {
                    this.$message.success("发送验证码成功")
                }else{
                    // this.$message.error("发送验证码失败")
                }
            })
        },
        change() {
            this.login = !this.login;
        },
        gologin() {
            hrLogin(this.loginData).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: '登录成功',
                        type: 'success'
                    });
                    hrCompanyCheckQuery().then(res => {
                        
                        if (res.data) {
                            if (this.$route.path!="/main/home") {
                                this.$router.push("/main/home")
                            }
                            
                        } else {
                            if (this.$route.path!="/companyCheck") {
                                this.$router.push("/companyCheck")
                            }
                            
                        }
                    })
                }
            }).catch(e =>{
                console.log(e);
                
            })
        },
        hrRegist() {
            if (this.registData.password == null) {
                this.$message.error('密码不得为空');
                return
            }
            if (this.registData.account == null) {
                this.$message.error('账号不得为空');
                return
            }
            if (this.registData.password == this.registData.repassword) {
                register(this.registData).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '注册成功',
                            type: 'success'
                        });
                        this.change()
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            } else {
                this.$message.error('两次密码输入不一致');
            }
        },
        validateImage() {
            validateCodeImage().then(res => {
                this.imageBase64 = res.data
            })
        }
    },
    mounted() {
        this.validateImage()
    }

}
</script>

<style></style>